<template>
	<view class="content">
		<!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
		<z-paging ref="paging" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
			style="height: calc(100% - 55px);" @scrolltolower="scrollToBottomFun">
			<!--客户基本信息-->
			<customerCard :item="khInfo" :isSelect="true"></customerCard>
			<!--客户阶段-->
<!-- 			<view class="myCard">
				<view class="cardTopName disFlexJ">
					<text>客户阶段</text>
					<view v-if="khInfo.status == 1" style="color: #F29100;" @click="pickerSelectFun('客户阶段')">
						更改
						<u-icon name="edit-pen-fill" color="#F29100"></u-icon>
					</view>
				</view>
				<u-steps class="width100" mode="number" active-color="#00aa00" :list="jieDuanList"
					:current="jieDuanIndex"></u-steps>
			</view> -->
<!-- 			<view class="myCard">
				<view class="cardTopName disFlexJ">
					<text>客户状态</text>
					<view style="color: #F29100;" @click="pickerSelectFun('客户状态')">
						更改
						<u-icon name="edit-pen-fill" color="#F29100"></u-icon>
					</view>
				</view>
				<u-steps class="width100" active-color="#00aa00" mode="number" :list="stateList" :current="stateIndex"></u-steps>
			</view> -->
			<!--tab-->
			<view class="uTabsView">
				<u-tabs :list="tabList" :is-scroll="true" duration="0.08" :current="tabIndex" :show-bar="false"
					font-size="32" @change="tabChange"></u-tabs>
			</view>
			<!-- 自定义下拉刷新view -->
			<!-- <custom-refresher slot="refresher" :status="refresherStatus"></custom-refresher> -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view class="contentView">
				<!--详细信息-->
				<view v-if="tabIndex == 0">
					<customerDetail :khInfo="khInfo"></customerDetail>
				</view>
				<!--跟进记录-->
				<view v-if="tabIndex == 1">
					<view v-for="(item, index) in tabList[1].arr" :key="index">
						<traceCard :item="item"></traceCard>
					</view>
				</view>
				<!--联系人-->
				<view v-if="tabIndex == 2">
					<view v-for="(item, index) in tabList[2].arr" :key="index">
						<linkmanCard :item="item" :isHideMore="true"></linkmanCard>
					</view>
				</view>
				<!--商机-->
				<view v-if="tabIndex == 3">
					<view v-for="(item, index) in tabList[3].arr" :key="index">
						<chanceCard :item="item"></chanceCard>
					</view>
				</view>
				<!--合同-->
				<view v-if="tabIndex == 4">
					<view v-for="(item, index) in tabList[4].arr" :key="index">
						<salContractCard :item="item"></salContractCard>
					</view>
				</view>
				<!--回款记录-->
				<view v-if="tabIndex == 5">
					<view v-for="(item, index) in tabList[5].arr" :key="index">
						<finReceRecordCard :item="item"></finReceRecordCard>
					</view>
				</view>
				<!--发票记录-->
				<view v-if="tabIndex == 6">
					<view v-for="(item, index) in tabList[6].arr" :key="index">
						<finInvoicePayCard :item="item"></finInvoicePayCard>
					</view>
				</view>
				<!--操作记录-->
				<view v-if="tabIndex == 7">
					<czjl :dataId="khInfo._id" pageType="client" :infoObj="khInfo" fl="客户"></czjl>
				</view>
				<!--加载更多-->
				<getMore :isMore="tabList[tabIndex].isMore"></getMore>
			</view>
		</z-paging>
		<bottomBox :sheetList="sheetList" :addSheetList="addSheetList" :item="khInfo" :isGhc="khInfo.openstatus == 0"
			:isKh="khInfo.openstatus == 1" @pageGenjinFun="pageGenjinFun" @pageDeleteShowFun="pageDeleteShowFun"
			@pageAddSheetFun="pageAddSheetFun" @pageBianjiFun="pageBianjiFun" @cxPGetDataFun="cxPGetDataFun">
		</bottomBox>
		<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>
	</view>
</template>

<script>
	let that = '';
	import {
		apiModule,
		apiCustomer,
		apiTrace,
		apiLinkman,
		apiChance,
		apiSalContract,
		apiFinReceRecord,
		apiFinInvoicePay
	} from '@/api/crm.js'
	import customerCard from '@/components/card/customerCard.vue'
	import customerDetail from '@/components/detail/customerDetail.vue'
	import bottomBox from '@/components/bottomBox/bottomBox.vue'
	import traceCard from '@/components/card/traceCard.vue'
	import linkmanCard from '@/components/card/linkmanCard.vue'
	import chanceCard from '@/components/card/chanceCard.vue'
	import salContractCard from '@/components/card/salContractCard.vue'
	//import huikuanJH from '@/components/card/huikuanJH.vue'
	import finReceRecordCard from '@/components/card/finReceRecordCard.vue'
	import finInvoicePayCard from '@/components/card/finInvoicePayCard.vue'
	// import czjl from '@/components/detail/czjl.vue'
	// import getMore from '@/components/getMore/getMore.vue'
	export default {
		components: {
			customerCard,
			customerDetail,
			bottomBox,
			traceCard,
			linkmanCard,
			chanceCard,
			salContractCard,
			finReceRecordCard,
			finInvoicePayCard,
			// shijiHK,
			// fapiao,
			// czjl,
			// getMore
		},
		data() {
			return {
				selectList: [],
				jieDuanIndex: 0,
				jieDuanList: [],
				stateList: [],
				stateIndex: 0,
				selectShow: false,
				khInfo: {},
				dataList: [],
				
				//tabl 切换选项
				tabList: [],

				//汇总统计
				hzList: [
					{ name: '跟进次数', num: 1 },
					{ name: '联系人', num: 1 },
					{ name: '商机', num: 1 },
					{ name: '报价单', num: 1 },
					{ name: '合同', num: 1 },
					{ name: '回款计划', num: 1 },
					{ name: '实际回款', num: 1 },
					{ name: '发票', num: 1 },
					{ name: '操作记录', num: 1 },
				],
				//普通选项
				sheetList: [
					{text: '更换负责人'},
					{text: '放入客户池'},
					{text: '删除'}
				],
				//添加选项
				addSheetList: [],
				tabIndex: 0,
				refresherStatus: 0,
				cardIndex: -1,
				isLoadSelectKhById: false
			}
		},
		onLoad(e) {
			that = this;
			that.cardIndex = e.index || -1;
			that.khInfo = uni.$khInfo || {};
			
			//设置客户阶段
			that.setJieduanAndStateFun()
			
			//设置标题名称
			uni.setNavigationBarTitle({
				title: that.khInfo.name || '客户详情'
			})
			
			
			//设置tab的选项值
			let module=apiModule();
			if(module.indexOf('crm')!=-1){
		
				//tab选择
				that.tabList= [
					{ name: '详细信息', arr: [], pageNum: 1, isMore: false },
					{ name: '跟进记录', arr: [], pageNum: 1, isMore: true },
					{ name: '联系人', arr: [], pageNum: 1, isMore: true },
					{ name: '商机', arr: [], pageNum: 1, isMore: true },
					{ name: '合同', arr: [], pageNum: 1, isMore: true },
					{ name: '回款记录', arr: [], pageNum: 1, isMore: true },
					{ name: '开票', arr: [], pageNum: 1, isMore: true },
				]
				
				//添加选项
				that.addSheetList=[
					{text: '跟进记录'},
					{text: '联系人'},
					{text: '商机'},
					{text: '报价单'},
					{text: '合同'},
					// {text: '回款计划'},
					{text: '回款'},
					{text: '开票'},
					// {text: '退货退款'}
				]
				
			}else{
				
				//tab选择
				that.tabList= [
					{ name: '详细信息', arr: [], pageNum: 1, isMore: false },
					{ name: '跟进记录', arr: [], pageNum: 1, isMore: true },
					{ name: '联系人', arr: [], pageNum: 1, isMore: true },
					{ name: '商机', arr: [], pageNum: 1, isMore: true },
					{ name: '合同', arr: [], pageNum: 1, isMore: true },
					{ name: '回款记录', arr: [], pageNum: 1, isMore: true },
					{ name: '开票', arr: [], pageNum: 1, isMore: true },
					{ name: '报价单', arr: [], pageNum: 1, isMore: true },
					{ name: '销售订单', arr: [], pageNum: 1, isMore: true },
				]
				
				//添加选项
				that.addSheetList=[
					{text: '跟进记录'},
					{text: '联系人'},
					{text: '商机'},
					{text: '合同'},
					{text: '回款'},
					{text: '开票'},
					{text: '报价单'},
					{text: '销售订单'},
					// {text: '退货退款'}
				]
				
			}
			
			//回调载入				
			if(e.fromDetail) {
				that.selectKhByIdFun(e.id)
			}
		},
		onBackPress(e) {
			if (e.from == 'backbutton' && this.cardIndex != -1) {
				uni.$emit('updateListByIndex', {
					index: this.cardIndex,
					obj: this.khInfo
				})
			}
		},
		onShow() {
			if (that.isLoadSelectKhById) {
				that.selectKhByIdFun();
			}
		},
		methods: {
			//选项卡点击加载数据
			tabChange(index) {
				this.tabIndex = index;
				let item = that.tabList[index];
				if (item.arr && item.arr.length > 0) {
					return
				}
				if (index == 1) {//客户详细

					that.getTraceFun()

				} else if (index == 2) {//联系人

					that.getLinkmanFun()

				} else if (index == 3) {//跟进记录

					that.getChanceFun()

				} else if (index == 4) {//合同订单

					that.getSalContractFun()

				} else if (index == 5) { //回款记录

					that.getFinReceRecordFun()

				} else if (index == 6) {//开票记录

					that.getFinInvoicePayFun()

				}
			},
			//tab数据滚动下拉
			scrollToBottomFun: function(e) {
				let index = that.tabIndex;
				let isMore = that.tabList[index].isMore;
				if (!isMore) {
					return
				}
				if (index == 1) {
					
					that.getTraceFun()
				} else if (index == 2) {
					
					that.getLinkmanFun()
				} else if (index == 3) {
					
					that.getChanceFun()
				} else if (index == 4) {
					
					that.getSalContractFun()
				} else if (index == 5) {
					
					that.getFinReceRecordFun()
				} else if (index == 6) {
					
					that.getFinInvoicePayFun()
				}
			},
			// 获取跟进记录
			getTraceFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							customer_id: that.khInfo.id
						},
						sortObj: {},
						pageNum: item.pageNum
					}
				}
				apiTrace(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item);
					})
			},
			// 查询联系人
			getLinkmanFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							customer_id: that.khInfo.id
						},
						sortObj: {},
						pageNum: item.pageNum
					}
				}
				apiLinkman(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item);
					})
			},
			// 查询商机
			getChanceFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							customer_id: that.khInfo.id
						},
						sortObj: {},
						pageNum: item.pageNum
					}
				}
				apiChance(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item);
					})
			},
			// 查询销售合同
			getSalContractFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							customer_id: that.khInfo.id
						},
						sortObj: {},
						pageNum: item.pageNum
					}
				}
				apiSalContract(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item);
					})
			},
			// 回款记录
			getFinReceRecordFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							customer_id: that.khInfo.id
						},
						sortObj: {},
						pageNum: item.pageNum
					}
				}
				apiFinReceRecord(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item);
					})
			},
			// 开出发票
			getFinInvoicePayFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							customer_id: that.khInfo.id
						},
						sortObj: {},
						pageNum: item.pageNum
					}
				}
				apiFinInvoicePay(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item);
					})
			},
			// 给tabList中的arr赋值
			setTabArrFun: function(data, item) {
				if (item.pageNum == 1) {
					item.arr = [];
				}
				if (data.length >= 10) {
					item.pageNum += 1;
					item.isMore = true;
				} else {
					item.isMore = false;
				}
				item.arr = item.arr.concat(data);

				console.log(item.arr)

				that.$set(that.tabList, that.tabIndex, item)
				
				//延时关闭  加载中的 loading框
				setTimeout(() => {
					uni.hideLoading()
				}, 188);
			},
			
			//下拉选择
			pickerSelectFun: function(str) {
				if (str == '客户状态') {
					that.selectList = [
						{value: 0,label: '潜在客户'},
						{value: 1,label: '初步接触'},
						{value: 2,label: '持续跟进'},
						{value: 3,label: '成交客户'},
						{value: 4,label: '忠诚客户'},
						{value: 5,label: '无效客户'}
					]
				} else if (str == '客户阶段') {
					that.selectList = [
						{value: 0,label: '初步接洽'},
						{value: 1,label: '确认需求'},
						{value: 2,label: '解决方案'},
						{value: 3,label: '商务谈判'},
						{value: 4,label: '成交'},
						{value: 5,label: '流失'}
					]
				}
				that.selectShow = true;
				that.selectType = str;
			},
			//选择状态的操作
			selectConfirmFun: function(e) {
				
				let str = e[0].label;
				
				let req = {
					update_date: new Date().getTime()
				}
				if (that.selectType == '客户状态') {
					
					req.companyState = str;
					
				} else if (that.selectType == '客户阶段') {
					
					req.jieDuan = str;
					
				}
				
				req.id= that.khInfo.id;
				
				let reqData = {
					action: 'update',
					params: {
						req
					}
				}
				uni.showLoading({
					title: '修改中...',
					mask: true
				})
				crmKeHuApi(reqData)
					.then(res => {
						that.khInfo.jieDuan = str;
						that.khInfo.update_date = req.update_date;
						uni.showToast({
							title: '修改成功！',
							duration: 888,
							icon: 'none'
						})
					})
			},
			// 新增跟进信息
			pageGenjinFun: function() {
				
			},
			// 修改客户信息
			pageBianjiFun: function() {
				that.recoverTabListFun();
				uni.$infoObj = that.khInfo;
				uni.navigateTo({
					url: './add??type=update'
				})
			},
			// 子组件中回调方法=
			pageAddSheetFun: function(e) {
				console.log(e)
				that.recoverTabListFun();
				let url = '/pages/crm/';
				if (e == 0) {
					url +='cst_trace';
				} else if (e == 1) {
					url +='cst_linkman';
				} else if (e == 2) {
					url +='cst_chance';
				} else if (e == 3) {
					url +='cst_quoted';
				} else if (e == 4) {
					url +='sal_contract';
				} else if (e == 5) {
					url +='fin_rece_record';
				} else if (e == 6) {
					url +='fin_invoice_pay';
				} 
				url += '/add?customer_name=' + that.khInfo.name + '&customer_id=' + that.khInfo.id
				
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			// 删除函数
			pageDeleteShowFun: function(e) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除客户名称为：' + that.khInfo.name + '的客户吗?',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...',
								mask: true
							})
							let reqData = {
								action: 'del',
								params: {
									id: that.khInfo._id,
								}
							}
							apiCustomer(reqData)
								.then(res => {
									uni.showToast({
										title: '删除成功!',
										duration: 888,
										icon: 'none'
									})
									if (that.cardIndex != -1) {
										uni.$emit('deleteKhFun', {
											index: that.cardIndex
										})
									}
									//that.addCzjlFun();
									setTimeout(() => {
										uni.navigateBack()
									}, 666)
								})
						}
					}
				})
			},
			
			// 设置客户阶段和状态
			setJieduanAndStateFun: function() {
				// let state = that.khInfo.companyState;
				let salestage = that.khInfo.salestage;
				let sList = that.stateList;
				let jList = that.jieDuanList;
				// for(var i = 0; i < sList.length; i++) {
				// 	if(sList[i].name == state) {
				// 		that.stateIndex = i;
				// 		break;
				// 	}
				// }
				for (var i = 0; i < jList.length; i++) {
					if (jList[i].name == salestage) {
						that.jieDuanIndex = i;
						break;
					}
				}
			},
			// 根据id查询客户
			selectKhByIdFun: function(id) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let reqData = {
					action: 'get_customer_detail',
					params: {
						id: ''
					}
				}
				if (id) {
					reqData.params.id = id;
				} else {
					reqData.params.id = that.khInfo.id;
				}

				apiCustomer(reqData)
					.then(res => {
						let data = res.data;
						if (data) {
							that.khInfo = data;
							that.setJieduanAndStateFun();
							setTimeout(() => {
								//延时关闭  加载中的 loading框
								uni.hideLoading()
							}, 888)
						} else {
							uni.showModal({
								title: '提示',
								content: '相关内容不存在，或者已被删除！',
								showCancel: false,
								success() {
									uni.navigateBack()
								}
							})
						}
					})
			},
			
			//重新改改tab中的参数
			recoverTabListFun: function() {
				that.isLoadSelectKhById = true;
				that.tabIndex = 0;
				that.tabList = [
					{
						name: '详细信息',
						isMore: false
					},
					{
						name: '跟进记录',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '联系人',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '商机',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '合同',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '回款记录',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '发票',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '操作记录',
						isMore: false
					}
				]
			},
			cxPGetDataFun: function(e) {
				uni.showToast({
					title: e + 'i',
					duration: 1000,
					icon: 'none',
					mask: true
				})
				uni.$emit('cxGetDataFun');
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		}
	}
</script>

<style>
	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */

	/*如果有scoped，page的css设置建议放在App.vue中 */
	page {
		height: 100%;
		background-color: #F8F8F8;
	}

	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}

	.uTabsView {
		border-bottom: 1rpx solid #DDDDDD;
		z-index: 100;
		position: sticky;
		top: 0;
	}

	.contentView {
		/* background-color: #FFFFFF; */
		min-height: calc(100vh - 45px);
	}

	.flexRow {
		display: flex;
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}

	.flexRow>view {
		width: 50%;
		display: flex;
	}

	.flexRow>view>text:first-child {
		width: 166rpx;
	}

	.item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.uTabsView {
		top: -2px !important;
	}

	.width100 {
		width: 100%;
		margin: 26rpx 0;
	}

	.u-steps__item,
	.u-steps__item--row {
		width: 200px !important;
	}
</style>
